<template>
<div class="main">
    <div class="title">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item>车行管理</el-breadcrumb-item>
        <el-breadcrumb-item>车位管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="">新建车位</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="content">
        新建车位
    </div>
    <div class="box">
        <div class="basic">基础信息</div>
        <div class="center">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="区域" prop="value">
                    <el-select v-model="ruleForm.value" placeholder="请选择区域">
                    <el-option label="A区" value="A区"></el-option>
                    <el-option label="B区" value="B区"></el-option>
                    <el-option label="C区" value="C区"></el-option>
                    <el-option label="D区" value="D区"></el-option>
                    <el-option label="E区" value="E区"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车位编号" prop="input">
                    <el-input v-model="ruleForm.input"></el-input>
                </el-form-item>
                <el-form-item label="车位面积" prop="input1">
                    <el-input v-model="ruleForm.input1"></el-input>
                </el-form-item>
                <el-form-item label="楼层" prop="input2">
                    <el-input v-model="ruleForm.input2"></el-input>
                </el-form-item>
                <el-form-item label="车位类型" prop="value1">
                    <el-select v-model="ruleForm.value1" placeholder="请选择">
                    <el-option label="产权车位" value="产权车位"></el-option>
                    <el-option label="公共停车位" value="公共停车位"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车位状态" prop="value2">
                    <el-select v-model="ruleForm.value2" placeholder="请选择">
                    <el-option label="闲置" value="闲置"></el-option>
                    <el-option label="自用" value="自用"></el-option>
                    <el-option label="租赁" value="租赁"></el-option>
                    <el-option label="借出" value="借出"></el-option>
                    <el-option label="其它" value="其它"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="back()">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            ruleForm: {
                input: '',
                input1: '',
                input2: '',
                value: '',
                value1: '',
                value2: '',
                desc: '',
            },
            rules: {
                value: [
                    { required: true, message: '请选择区域', },
                ],
                input: [
                    { required:true,message:"请输入"}
                ],
                value2: [
                    { required: true, message: '请选择', },
                ],
            },
            bol:false,
            lists:[],
        }
    },
    
    methods:{
        back(){
            this.$router.go(-1)
        },
        submitForm(formName) {
            this.bol=true
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.$route.query.data){
                    axios.post(`http://localhost:8085/user/updatelot`,{
                        data:this.ruleForm,
                        id:this.$route.query.data.id
                    }).then(res=>{ 
                        console.log(res);
                    }).catch(error=>{ 
                        console.log(error);
                    })
                }else{
                    axios.post(`http://localhost:8085/user/addlot`,{
                        data:this.ruleForm
                    }).then(res=>{ 
                        console.log(res);
                    }).catch(error=>{ 
                        console.log(error);
                    })
                }
                setTimeout(()=>{
                    this.$router.go(-1)
                },1000)
            } else {
                console.log('error submit!!');
                return false;
            }
            });
            
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted(){
        if(this.$route.query.data){
            this.ruleForm.value=this.$route.query.data.area
            this.ruleForm.input=this.$route.query.data.spotnumber
            this.ruleForm.input1=this.$route.query.data.areasize
            this.ruleForm.input2=this.$route.query.data.floor
            this.ruleForm.value1=this.$route.query.data.spottype
            this.ruleForm.value2=this.$route.query.data.spotstatus
            
        }
        
    }
}
</script>

<style scoped lang="scss">
.el-button{
    margin-right: 15px;
}
.el-alert{
    position: fixed;
    left: 50%;
    width: 300px;
    height: 40px;
    top: 50px;
}
.center{
    width: 600px;
    margin: auto;
}
.main{
    margin: 0px;
    background-image: none;
    position: relative;
    left: -24px;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    .title{
        margin-top: 20px;
        padding: 16px 0 0 32px;
        background-color: #fff;
    }
    .content{
        font-weight: 700;
        background-color: #fff;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.847058823529412);
        padding: 16px 0 16px 32px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);;
    }
    .box{
        padding: 16px 0px 16px 32px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.847058823529412);
        background-color: #fff;
        margin-top: 15px;
        .box-content{
            justify-content: center;
            display: flex;
            margin-top: 20px;
            align-items: center;
            span{
                font-size: 14px;
            }
            .name{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-left: 37px;
            }
            .star{
                color: #F46161;
                margin-right: 15px;
            }
            .unit{
                margin-left: 15px;
            }
        }
        
    }
}
.boxs{
    margin-right: 90px;
}
.box-contents{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    span{
        font-size: 14px;
        margin-right: 21px;
        margin-left: 30px;
        color: rgba(0, 0, 0, 0.847058823529412);
    }
    ::v-deep .el-textarea__inner{
        resize: none;
        width: 340px;
        height: 88px;
    }
}
.box-content{
    ::v-deep .el-input__inner{
        width: 340px !important;
        height: 32px !important;
        
    }
    ::v-deep .el-input{
        width: 340px !important;
    }
    ::v-deep .el-input__icon{
        line-height: 0 !important;
        
    }
}
.ipt{
    ::v-deep .el-input{
        margin-right: 27px !important;
    }
}
.el-input {
    ::v-deep .el-input__inner {
        width: 340px !important;
        height: 32px !important;
    }
}
.el-select{
    ::v-deep .el-input__inner {
        width: 340px !important;
        height: 32px !important;
    }
}
.el-textarea{
    ::v-deep .el-textarea__inner{
        resize: none;
        width: 340px;
        height: 88px;
    }
}
</style>